<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Bubble Graph</title>
  </head>

  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/raphael.min.js"></script>
    <script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>
    <script type="text/javascript">   
    seajs.config({
        alias: {
            'datav': '/DataVisual/resources/datavjs/datav.js',
            'bubble': '/DataVisual/resources/datavjs/libs/bubble.js'
        }
    });

    seajs.use(["bubble", "datav"], function (Bubble, DataV) {
        var bubble = new Bubble("chart", {"width": 1200, "height": 800});
        DataV.csv("nations2.csv", function(dataSource) {
            bubble.setSource(dataSource);
            // the dimension order is time, key, xaxis,yaxis,size,color dimension
            // if you don't input next line, your source dimensions's order should be like above order
            // bubble.chooseDimensions(["year", "country", "survival", "children", "population", "region"]);
            bubble.render();
        });
    });
    </script>
  </body>
</html>